<template>
  <view class="dashboard">
    <view class="dashboardhouse">
      <view class="title">
        <view class="countView">
          累计收入（元）
          <view class="count">
            2800.00
          </view>
        </view>
      </view>
    </view>
    <view class="dashboardContent">
      <view class="title">
        <view class="countView">
          本月收入
          <view class="count">
            2800.00
            <view class="tag">
              较上月上涨23%
            </view>
          </view>
        </view>
      </view>
      <view class="subtitle">
        本月收益详情
      </view>
      <view class="incomeList">
        <view class="incomeItem">
          <view class="imgview">

          </view>
          <view class="incomeDetail">
            <view class="incomeName">
              销售收入
            </view>
            <view class="incomeMoney">
              200000.00
            </view>
          </view>
        </view>
        <view class="incomeItem">
          <view class="imgview">

          </view>
          <view class="incomeDetail">
            <view class="incomeName">
              货品收入
            </view>
            <view class="incomeMoney">
              200000.00
            </view>
          </view>
        </view>
        <view class="incomeItem">
          <view class="imgview">

          </view>
          <view class="incomeDetail">
            <view class="incomeName">
              区域性奖励收入
            </view>
            <view class="incomeMoney">
              200000.00
            </view>
          </view>
        </view>
        <view class="incomeItem">
          <view class="imgview">

          </view>
          <view class="incomeDetail">
            <view class="incomeName">
              服务金收入
            </view>
            <view class="incomeMoney">
              200000.00
            </view>
          </view>
        </view>
      </view>
      <view id="piechart">

      </view>
    </view>
  </view>
</template>

<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {

    };
  },
  methods: {

  },
  computed: {

  },
  watch: {

  },
  // 页面周期函数--监听页面加载
  onLoad() {

  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() {
    var myChart = echarts.init(document.getElementById('piechart'));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'item'
        },
        label: {
          alignTo: 'edge',
          formatter: '{name|{b}}\n{time|{c}}',
          minMargin: 5,
          edgeDistance: 10,
          lineHeight: 15,
          rich: {
            time: {
              fontSize: 10,
              color: '#999'
            }
          }
        },
        labelLine: {
          length: 15,
          length2: 0,
          maxSurfaceAngle: 80
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '区域金奖励收入' },
              { value: 735, name: '服务金收入' },
              { value: 580, name: '货品收入' },
              { value: 484, name: '销售收入' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });
  },
  // 页面周期函数--监听页面显示
  onShow() {},
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {},
  // 页面处理函数--监听用户下拉动作
  onPullDownRefresh() {},
  // 页面上拉触底事件的处理函数
  onReachBottom() {},
  // 用户点击右上角分享
  onShdashboardppMessage() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  onPageScroll(e) {}
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
